<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
  <meta name="viewport"
  	content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .exspan {
            font-size: 35px;
            text-indent: 25px;
        }
        body {
            width: 100%;
            height: 100%;
            background-color: rgb(243, 241, 241);
            background-image: url(./img/timg12.jpg);
            background-size: 100% 100%;
            background-repeat: none;
        }
        .game span {
            font-size: 40px;
        }
        .game span:hover {
            font-size: 44px;
     
        }
        .game span a{
           font-weight: bold;
            color: yellow;
            text-decoration: none;
        }
        .game span a:hover {
            color: red;
     
        }
        .explain div {
            width: 500px;
            height: 150px;
            margin: 10px auto;
        }

        .game {
            position: absolute;
            left: 25%;
            top: 450px;
            width: 200px;
            height: 80px;
            border: 1px solid #000;
            background-image: url(./img/timg15.gif);
            background-size: 150px 80px;
            background-repeat: none;
        }

        .Span {
            margin-top: 13px;
			
            margin-left: 20px;
        }

        .Oimg img {
            width: 300px;
        }

        .All {
            position: relative;
			padding-left: 20px;
        }
    </style>
</head>

<body>
    <ul class="Oul"></ul>
    <div class="All">
        <div class="explain">
            <div>
                <h1 style=" font-size: 40px;">游戏规则：</h1><span class="exspan">
                   </span>
            </div>

        </div>


    </div>
    
            <img src="./img/bird.gif" alt="">
            <div class="game">
                <div class="Span"><span><a href="game.html">开始游戏</a></span></div>
            </div>
    <script>
        var exspan = document.querySelector('.exspan');
        var Oul = document.querySelector('.Oul');
        var String = ['在游戏中，根据垃圾</br>性质选择正确的答案</br>一题10分 共100分</br>，加油  ！！！']
        function show(str) {
            for (let i = 0; i < str.length; i++) {
                let Timer = setTimeout(function () {
                    let string = str.slice(0, i);
                    exspan.innerHTML = string;
                    var Oaudio = document.createElement('audio');
                    Oul.appendChild(Oaudio)
                    Oaudio.innerHTML = `<source src="./music/click4.mp3" type="audio/mpeg" />  `;
                    Oaudio.play();
                    clearTimeout(Timer);
                }, 60 * i)
            }
        }
        show(String[0]);
    </script>
</body>

</html>